<template>
	<view class="cardstyle">
		<text class="titlebox">{{title}}</text>
		<view class="tipsbox">
			<text class="top-tag" v-if="isTop">置顶</text>
			<text class="author">{{author}}</text>
			<text class="comments">{{comments}}评</text>
			<view class="time-container">
				<text class="time">{{time}}</text>
			</view>
		</view>
		<!-- <slot name="tips"></slot> -->
	</view>
</template>

<script>
	export default {
		name: "cardViewText",
		props: {
			title: {
				type: String,
				default: "新闻标题",
				required: true
			},
			isTop: {
				type: Boolean,
				default: false,
				required: true
			},
			author: {
				type: String,
				default: "来源",
				required: true
			},
			comments: {
				type: Number,
				default: 0,
				required: true
			},
			time: {
				type: String,
				default: "2023.10.29"
			}
		},
		data() {
			return {}
		}
	}
</script>

<style scoped>
.cardstyle {
	background-color: rgb(238,255,255);
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid #f0f0f0;
}

.titlebox {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	line-height: 1.5;
	display: block;
	margin-bottom: 20rpx;
}

.tipsbox {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #999999;
}

.top-tag {
	color: #ff0000;
	font-weight: bold;
	margin-right: 20rpx;
	background-color: #fff0f0;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
}

.author {
	margin-right: 20rpx;
}

.comments {
	margin-right: 20rpx;
}

.time-container {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.time {
	color: #666666;
}
</style>